<template>
  <div class="cart">
    <el-button class="left" @cick="prev" type="warning">
      &lt; 回到上一页
    </el-button>
    <el-button type="danger" class="right" @click="next">
      查看收藏夹 &gt;
    </el-button>
    <div class="container">
      <el-card>
        <div class="top">
          <div>
            <el-checkbox>
              <span class="first">全选</span>
            </el-checkbox>
          </div>
          <div>商品信息</div>
          <div>单价</div>
          <div>数量</div>
          <div>小计</div>
        </div>
        <div class="cartList">
          <div>
            <el-checkbox size="large" border></el-checkbox>
          </div>
          <div class="detail">
            <img :src="productList[0].pic" alt="">
            <span>{{productList[0].info}}</span>
          </div>
          <div>
            ￥{{ productList[0].price}}
            <p>比加入时降价 <span class="money">￥{{ productList[0].low}}</span></p>
          </div>
          <div class="num">
            <el-input-number v-model="num" :min="1" :max="999" @change="handleChange" />
          </div>
          <div class="sum">
            ￥{{ sum(num.value, productList[0].price)}}
          </div>
        </div>
      </el-card>
    </div>
    <div class="check">
      <el-card>
        <el-checkbox v-model="checkedAll" size="large">
          <span>全选</span>
        </el-checkbox>
        <span class="choice">
          <el-button type="info">删除商品</el-button>
          <el-button type="danger">移入收藏夹</el-button>
        </span>
        <span class="info">
          共7件商品,已选择2件,商品合计:
          <span class="price">￥59.10</span>
        </span>
        <span class="pay">
          <el-button type="success" size="large">下单结算</el-button>
        </span>
      </el-card>
    </div>
  </div>
</template>

<script>
import router from '@/router';
import {useStore} from 'vuex';
import { ref } from 'vue'

export default {
  name:'Cart',
  setup(){
    const store = useStore()
    const productList = store.state.cart.List
    const sum = (num,price)=>{
      return num*price
    }
    const prev = ()=>{
      router.back()
    }
    const next = () => {
      router.push('/cart')
    }
    const checkedAll = ref(false)
    const num = ref(1)
    const handleChange = (value) => {
      console.log(value)
    }
    return {prev,next,sum,productList,num,handleChange,checkedAll}
  }
}
</script>

<style lang="less" scoped>
.cart{
    width: 100%;
    height: 800px;
    background-color: transparent;

    .left {
      margin-left: 20px;
      margin-top: 20px;
    }
    .right {
      margin-left: 1000px;
      margin-top: 20px;
    }
    .container{
      width: 100%;
      height: 60%;
      background-color: rgb(red, green, rgb(66, 66, 88));
      .el-card{
        margin: 40px auto !important;
        width: 80%;
        height: 90%;
      }
    }
    .top{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 10%;
      border-bottom: 1px solid;
      div{
        flex:1;
        text-align: center;
      }
      div:first-child,
      div:nth-child(2){
        text-align: left;
      }
      .first{
        color:#999;
      }
    }
    .cartList {
      display: flex;
      width: 100%;
      height: 20%;
      justify-content: center;
      align-items: center;
      div{
        flex:1;
        text-align: center;
      }
      div:first-child,
      div:nth-child(2) {
        text-align: left;
      }
      .detail{
        img{
          margin-top: 10px;
          width: 60px;
          height: 100%;
          background-size: contain;
        }
        span{
          display: inline-block;
          overflow: hidden;
          width: 130px !important;
          text-overflow: ellipsis !important;
          white-space: nowrap;
        }
      }
      .money{
          color:red
        }
    }
    .check{
      width: 80%;
      height:10%;
      margin: -20px auto;
      .el-card{
        width: 100%;
        height: 100%;
        span{
          font-size: 14px;
          color:#999;
        }
      }
    }
    .choice{
      .el-button{
        margin-left: 20px;
      }
    }
    .info{
      margin-left: 300px;
      color:#000 !important;
      .price {
          font-size: 18px !important;
          color: red !important;
        }
    }
    .pay{
      margin-left: 10px;
      margin-top: 10px !important;
    }
}
</style>
